import React, { useState, useEffect } from 'react';
import ReactEChartsCore from 'echarts-for-react/lib/core';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import { ToolboxComponent, TooltipComponent, GridComponent, DataZoomComponent } from 'echarts/components';
import { loc, to_float, for_obj, is_empty, obj_empty } from 'sui';

echarts.use([BarChart, ToolboxComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer]);

const ChartNoPair = ({ cur, tp, title }) => {
    const [option, setOption] = useState();
    const [sum, setSum] = useState();

    useEffect(() => {
        if (obj_empty(cur) || obj_empty(cur.data)) {
            return;
        }

        const dia = cur["dia"];

        const val = cur.data[dia];
        if (is_empty(val)) {
            return;
        }

        setSum(val.length);

        const map_val = {};

        val.forEach(d => {
            const v = d[tp];

            if (map_val[v]) {
                map_val[v] += 1;
            } else {
                map_val[v] = 1;
            }
        });

        const data_val = [];

        for_obj(map_val, (k, v) => data_val.push([to_float(k), v]));

        data_val.sort((a, b) => a[0] > b[0] ? 1: -1);

        const data = [{
            type: 'bar',
            barWidth: 30,
            data: data_val,
        }];

        const opt = {
            toolbox: {
                feature: {
                    saveAsImage: {
                        show: false,
                    }
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                formatter: function(para) {
                    const d = para[0];
                    if (!d.value) {
                        return "";
                    }

                    return d.value[0] + '<br/>' + d.value[1];
                }
            },
            xAxis: {
                type: 'category',
            },
            yAxis: {
                type: 'value',
            },
            label: {
                show: true,
                position: "top",
            },
            dataZoom: [
                {
                    type: 'slider',
                    height: 20,
                    start: 0,
                    end: 100
                },
            ],
            series: data,
        };

        setOption(opt);
    }, [cur, tp]);

    if (obj_empty(cur)) {
        return null;
    }

    if (obj_empty(option)) {
        return null;
    }

    return (
        <div className="flex flex-col">
            <div className="ml-2 mt-2 text-base flex justify-center">{title}<span className="ml-4">{`${loc("l_127")}: ${sum}`}</span></div>
            <ReactEChartsCore echarts={echarts} option={option} style={{ height: '300px' }}/>
        </div>
    );
};


export {ChartNoPair};
